<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet/less" type="text/css" href="css/new_file.less"/>
		<style>
			div{
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			0000000000000
			<div class="box_item">1111111111
			</div>
		</div>
		<style>
			
		</style>
		
	</body>
</html>
<script src="js/less.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// less 初体验
	// 引入less文件
	   //link 标签一定要在 Less.js 之前引入，并且 link 标签的rel 属性要设置为stylesheet/less
	   //注意结尾;  less严格模式
	
//---------------------------------------------------------------------------------------------------------------	
	//示例0嵌套
	//Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：
//		#header {
//	  color: black;
//	}
//	#header .navigation {
//	  font-size: 12px;
//	}
//	#header .logo {
//	  width: 300px;
//	}
	//用 Less 语言我们可以这样书写代码：
//		#header {
//	  color: black;
//	  .navigation {
//	    font-size: 12px;
//	  }
//	  .logo {
//	    width: 300px;
//	  }
//	}
//用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
//-----------------------------------------------------------------------------------------------------------------------------------------
	//示例1 变量
//			@width: 10px;
//		@height: @width + 10px;
//		#header {
//		  width: @width;
//		  height: @height;
//		}
	//编译为
//		#header {
//		  width: 10px;
//		  height: 20px;
//		}
//------------------------------------------------------------------------------------------------------------------------------	
	//示例2 混合
	//混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
	//假设我们定义了一个类（class）如下：
//		.bordered {
//	  border-top: dotted 1px black;
//	  border-bottom: solid 2px black;
//	}
	//如果我们希望在其它规则集中使用这些属性呢？没问题，
	//我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
	//编译为
	//注意结尾;
//		#menu a {
//	  color: #111;
//	  .bordered();
//	}
//	
//	.post a {
//	  color: red;
//	  .bordered();
//	}
//-------------------------------------------------------------------------------------------------------------------------
	//(& 表示当前选择器的父级）
//			.clearfix {
//	  display: block;
//	  zoom: 1;
//	
//	  &:after {
//	    content: " ";
//	    display: block;
//	    font-size: 0;
//	    height: 0;
//	    clear: both;
//	    visibility: hidden;
//	  }
//	}
//  
//	 &:nth-last-child(-n+4) 表示父元素下后四个孩子
//		&:nth-child(2),     表示父元素下第2个孩子和第三个孩子
//      &:nth-child(3){
//          border-bottom: 10rpx solid #FFf;
//        }
		// 2n              2的倍数  2   4  6 8 10
		// 3n              3的倍数  3   6  9
		// 3n-1            2  5  8
		// 2n+1            1  3  5
		// 5n+1            1   6   10    15
		// nth-child       不分类型的子
		// nth-of-type     区分的  子

//--------------------------------------------------------------------------------------------------------------	
//		>，即与父元素有直接的血缘关系的子元素，在后面直接接上就行	
	

 //   下载安装  esay less
 // "less.compile": {    转小程序
    //     "outExt":".wxss",
	// },
	
    // "less.compile": {  转css
    //     "outExt": ".css"

    // }
//---------------------------------------------------------------------------------------------------------------
// not(.input)：所有 class 不是“input”的节点 	
	
//	预处理语言 sass less ？
//       less和sass最大的区别在于其实现方式不同
//       less是基于javascript运行，所以less也常用语  客户端处理
//       sass是基于Ruby，                     常在   服务端处理

//  CSS简单易懂，但是毫无逻辑   为啥毛 用sass&less？
//     	 常常一个颜色的值能出现很多很多次，或者一个宽度的值能出现很多次；
//           大量的选择器在代码中，一会用那个，一会用这个，毫无逻辑，无层次，不美观，不易维护；
//       每一个新属性的诞生又会带来大量浏览器兼容性的问题；
//           此外，CSS虽然易学，好用，但其短板不可忽视，于是就引入了预处理语言

//简述sass和less区别？
		//sass是基于ruby编译的，less是基于nodejs编译的
		//sass有@extednd用于做继承，而less没有
		//sass用$定义一个变量，less用@定义一个变量
		//sass支持@for循环，less则不支持



// 1.vue中使用less 安装less依赖 
	// npm install less less-loader --save-dev       cmd
	// 修改 webpack.base.config.js 配置文件
	//   {
	//     test:/\.less$/,
	//     loader:'style-loader!css-loader!less-loader'
	// }
	//在使用时 在style标签中加入 lang=“less” 也可以加上scoped代表样式只在此作用域中有效。
//2.使用element插件时修改其样式，在vue中不起作用，这里有几种方法可以尝试
	// 如果 style 中加了 scoped 去掉它。在要改变的样式前加 /deep/
	// /deep/.el-submenu__title .el-icon-arrow-down{
	// margin-top:-5px;
	// }











</script>